<template>
    <div class="login-page">
        <!-- 上方的两个图片及装饰物 -->
        <image src="../../static/image/bg.png" mode="widthFix" class="login-bg" />
        <image src="../../static/image/title.png" mode="widthFix" class="title-image" />
        <div class="decorate-box"></div>

        <!-- 登录框 -->
        <div class="login-box">
            <div class="text-center mb-5">欢迎登录</div>
            <div class="login-form">
                <uni-forms
                    ref="form"
                    v-model="loginForm"
                    :rules="formRules"
                    label-position="top"
                    :label-width="100"
                >
                    <uni-forms-item label="请输入用户名" name="username">
                        <uni-easyinput type="text" v-model="loginForm.username" :inputBorder="false" />
                    </uni-forms-item>

                    <uni-forms-item label="请输入密码" name="password">
                        <uni-easyinput type="password" v-model="loginForm.password" :inputBorder="false" />
                    </uni-forms-item>
                </uni-forms>

                <div class="login-btn" @click="doLogin">登 录</div>

                <!-- <div class="text-grayText w-full text-center my-5">忘记密码 ?</div> -->
            </div>
        </div>

        <!-- 下方同意条约 -->
        <!-- <checkbox-group @change="changeAgree">
            <div class="agree-box">
                <checkbox :checked="isAgree" color="#FF9D14" />
                同意
                <span class="text-primary">《用户隐私协议》</span>
                和
                <span class="text-primary">《用户注册协议》</span>
            </div>
        </checkbox-group> -->
    </div>
</template>

<script lang="ts" setup>
    import { getRight, login } from '@/api/login'
    import { userStore } from '@/store/modules/user'
    import { goTo } from '@/utils/publicFuc'
    import qs from 'qs'
    const loginForm = ref<AnyObject>({
        username: '',
        password: '',
    })
    const form = ref<any>(null)
    // const isAgree = ref(true)

    const formRules = {
        username: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入用户名',
                },
            ],
        },
        password: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入密码',
                },
            ],
        },
    }

    // const changeAgree = () => {
    //     isAgree.value = !isAgree.value
    // }

    // 登录
    const doLogin = () => {
        // 未勾选时先要求用户勾选
        // if (!isAgree.value) return uni.showToast({ title: '请同意协议', icon: 'error', duration: 3000 })
        // 同意时先校验表单

        form.value.validate().then((res: any) => {
            const params = qs.stringify(res)
            login(params).then(res => {
                const { data }: any = res
                userStore().setToken(data)
                // 获取用户权限
                getRight().then(() => {
                    // 这里处理权限
                    uni.showToast({ title: '登录成功', icon: 'success', duration: 3000 })
                    setTimeout(() => {
                        goTo('/pages/home/index', true)
                    }, 3000)
                })
            })
        })
    }
</script>

<style lang="scss" scoped>
    .login-page {
        @apply relative w-screen min-h-screen overflow-hidden;
        .login-bg {
            @apply left-0 top-0 absolute w-full;
        }
        .title-image {
            @apply left-1/2 absolute -translate-x-1/2;
            width: 423rpx;
            top: 212rpx;
        }
        .decorate-box {
            @apply left-1/2 absolute -translate-x-1/2 bg-white rounded-full;
            top: 286rpx;
            width: 62rpx;
            height: 5rpx;
        }
        :deep(.login-box) {
            @apply left-1/2 absolute -translate-x-1/2 bg-white rounded-lg px-4 py-6 shadow-md box-border;
            top: 313rpx;
            width: 645rpx;
            .login-btn {
                @apply text-white w-full  py-3 box-border rounded-full text-center;
                background: linear-gradient(0deg, #ff9a0f 0%, #ffba59 100%);
                box-shadow: 0px 4px 13px 0px rgba(255, 162, 34, 0.47);
            }

            .uni-easyinput__content {
                background-color: #f8f8f8 !important;
            }
            .is-required {
                display: none;
            }
        }
        :deep(.agree-box) {
            @apply absolute left-0 w-full flex justify-center items-center text-grayText text-sm;
            bottom: 50rpx;
            uni-checkbox .uni-checkbox-input {
                border-radius: 50% !important;
                color: #ffffff !important;
                transform: scale(0.7);
            }
            uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
                border-color: #ff9d14;
            }
        }
    }
</style>
